<template>
	<view>
		<!-- 培训申请报销 -->
		<view class="head_tb">
			<u-tabs :activeStyle="{
						 fontSize:'30rpx',
						 color: '#007aff'
			         }" :inactiveStyle="{
						 fontSize:'30rpx'
			         }" :scrollable='false' :lineWidth='40' itemStyle='height:80rpx;padding:0 10rpx' :list="list1"
				@click="checkbtn"></u-tabs>
		</view>
		<!-- 基本信息 -->
		<view class="msp">
			<CellChild :addlist='addlist' :rows='rows' title='基本信息' :fileNo = 'fileNo' isshow='true' id='add_one'>
			</CellChild>
		</view>
		<!-- 培训人员信息 -->
		<view class="formcard" id='add_two'>
			<view v-for="(item,index) in trainPersonEntities" :key='index'>
				<Expandlist :cellshows='cellshow' :arrcell='item' :celllist='userlist' title='培训人员信息'>
				</Expandlist>
			</view>
		</view>

		<!-- 培训机构信息 -->
		<view v-for="(x,index) in trainCompanyEntities" :key="index">
			<CellChild :addlist='infolist' :rows='x'  title='培训机构信息' isshow='true'>
				
			</CellChild>
		</view>

		<!-- 预算信息 -->
		<view class="formcard" id="add_three">
			<view class="bodtitle">
				<p><b>预算信息</b></p>
			</view>
			<view v-for="(item,index) in trainedBudgetEntities" :key="index">
				<Expandlist :cellshows='cellshow' :arrcell='item' :celllist='celllist' :title='item.budgetNo'>
					<template #text>
						<view class="right_text">
							<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{item.approveAmt}}</span></p>
						</view>
					</template>
				</Expandlist>
			</view>
		</view>
		
		
		<!-- 费用汇总 -->
		<!-- <view class="formcard" id='add_three'>
			<view class="bodtitle">
				<p><b>费用汇总</b></p>
			</view>
			<view class="sky">
				<p>报销金额</p>
				<p>补贴金额</p>
				<p>支付金额</p>
			</view>
			
			<view class="sky" style="font-size: 36rpx;background-color: white;width: 95%;margin: 0 auto;">
				<p><b>5,400.00</b></p>
				<p><b>5,400.00</b></p>
				<p><b>5,400.00</b></p>
			</view>
		</view> -->
		
		<!-- 费用明细 -->
		<view class="formcard" id="add_four">
			<view class="bodtitle">
				<p><b>费用明细</b></p>
			</view>
			<view v-for="(r,index) in reiRouteEntities">
				<Expandlist :cellshows='cellshow' :arrcell='r' :celllist='celllist1' :title='r.empNm'>
					<template #list>
						<!-- 费用补贴 -->
						<view class=" bod_cost">
							<view class="bus">
								<image src="@/static/newimg/ysfy/bzje.svg" style="margin-right: 10rpx;"></image>
								<p>
									<b>补助金额</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.vehicleSubsidyAmt+r.lunchSubsidyAmt+r.dinnerSubsidyAmt+r.dateOffSub}}</span></p>
							<u-icon v-show="!cellshow3" @click="cellshow3 = !cellshow3"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-down"></u-icon>
							<u-icon v-show="cellshow3" @click="cellshow3 = !cellshow3"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-up"></u-icon>
							</view>
						</view>
						<el-collapse-transition>
						<view v-show="cellshow3" class="sub_cost">
							<view v-for="(item,index) in bzmoney" :key="index" class="bod_costs"
								style="background-color: #f7fbff;border: 1px solid white;">
								<view class="bus">
									<p style='color: #666666'>{{item.tit}}</p>
								</view>
								<p class='bodcolors' style='word-break:break-all ; '  v-money>{{r[item.val]}}</p>
							</view>
						</view>
						</el-collapse-transition>
						
						
						<!-- 交通费 -->
						<view class=" bod_cost">
							<view class="bus">
								<image src="@/static/newimg/ysfy/jtf.svg" style="margin-right: 10rpx;"></image>
								<p>
									<b>交通费</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.xcTrainTickets+r.noXcTrainTickets+r.xcTrainTax+r.xcFlyTickets+r.noXcFlyTickets+r.xcFlyTax+r.noAutBusTickets+r.autBusTickets+r.autBusTicketsAtx}}</span></p>
							<u-icon v-show="!cellshow1" @click="cellshow1 = !cellshow1"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-down"></u-icon>
							<u-icon v-show="cellshow1" @click="cellshow1 = !cellshow1"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-up"></u-icon>
							</view>
						</view>
						<el-collapse-transition>
						<view v-show="cellshow1" class="sub_cost">
							<view v-for="(item,index) in busmoney" :key="index" class="bod_costs"
								style="background-color: #f7fbff;border: 1px solid white;">
								<view class="bus">
									<p style='color: #666666'>{{item.tit}}</p>
								</view>
								<p class='bodcolors' style='word-break:break-all ; '  v-money>{{r[item.val]}}</p>
							</view>
						</view>
						</el-collapse-transition>
						
						<!-- 住宿费 -->
						<view class=" bod_cost">
							<view class="bus">
								<image src="@/static/newimg/ysfy/zsf.svg" style="margin-right: 10rpx;"></image>
								<p>
									<b>住宿费</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.xcHotelAmt+r.noXcHotelAmt}}</span></p>
							<u-icon v-show="!cellshow2" @click="cellshow2 = !cellshow2"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-down"></u-icon>
							<u-icon v-show="cellshow2" @click="cellshow2 = !cellshow2"
								style='display: inline-block;padding-left: 10rpx;' name="arrow-up"></u-icon>
							</view>
						</view>
						<el-collapse-transition>
						<view v-show="cellshow2" class="sub_cost">
							<view v-for="(item,index) in zsmoney" :key="index" class="bod_costs"
								style="background-color: #f7fbff;border: 1px solid white;">
								<view class="bus">
									<p style='color: #666666'>{{item.tit}}</p>
								</view>
								<p class='bodcolors' style='word-break:break-all ; '  v-money>{{r[item.val]}}</p>
							</view>
						</view>
						</el-collapse-transition>
						<!-- 培训费 -->
						<view class=" bod_cost">
							<view class="bus">
								<image src="@/static/newimg/ysfy/pxf.svg" style="margin-right: 10rpx;"></image>
								<p>
									<b>培训费</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span">字段还没加</span></p>
							</view>
						</view>
						<!-- 其他费用 -->
						<view class=" bod_cost">
							<view class="bus">
								<image src="@/static/newimg/ysfy/qt.svg" style="margin-right: 10rpx;"></image>
								<p>
									<b>其他</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.otherAmt}}</span></p>
							</view>
						</view>
						
						<!-- 报销金额合计 -->
						<view class=" bod_cost">
							<view class="bus">
								<p>
									<b>报销金额合计</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.otherAmt}}</span></p>
							</view>
						</view>
						
						<!-- 财务审核金额 -->
						<view class=" bod_cost">
							<view class="bus">
								<p>
									<b>财务审核金额</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.auditNoTax+r.auditTax}}</span></p>
							</view>
						</view>
						<view class=" bod_cost">
							<view class="bus">
								<p style='color: #666;'>
									不含税金额
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label>￥</label><span v-money>{{r.auditNoTax}}</span></p>
							</view>
						</view>
						<view class=" bod_cost">
							<view class="bus">
								<p style='color: #666;'>
									税额
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label >￥</label><span v-money>{{r.auditTax}}</span></p>
							</view>
						</view>
						
						<!-- 财务审核金额 -->
						<view class=" bod_cost">
							<view class="bus">
								<p>
									<b>支付金额</b>
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label class="solts_label">￥</label><span class="solts_span" v-money>{{r.payNoTax+r.payTax}}</span></p>
							</view>
						</view>
						<view class=" bod_cost">
							<view class="bus">
								<p style='color: #666;'>
									不含税金额
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label >￥</label><span v-money>{{r.payNoTax}}</span></p>
							</view>
						</view>
						<view class=" bod_cost">
							<view class="bus">
								<p style='color: #666;'>
									税额
								</p>
							</view>
							<view style="white-space:nowrap;">
								<p class='solts'><label>￥</label><span  v-money>{{r.payTax}}</span></p>
							</view>
						</view>
					</template>
				</Expandlist>
			</view>
		</view>
		


		<!-- 报告评价表 -->
		<view class="formcard" id="add_four">
			<view class="bodtitle">
				<p><b>报告评价表</b></p>
			</view>
			<view v-for="(item,index) in trainedEvaluationEntities" :key="index">
				<Expandlist :cellshows='cellshow' :arrcell = 'item' :celllist='celllist2' :title='item.empNm+(item.empNo)'>
					<template #text>
						<p class='solts'><span><b>{{item.grade}}</b><label style="font-size: 22rpx;">分</label></span></p>
					</template>
				</Expandlist>
			</view>
		</view>

		
		<!-- 培训效果评估 -->
		<view class="formcard" id='add_three'>
			<view class="bodtitle">
				<p><b>培训效果评估</b></p>
			</view>
			<view class=" bod_cost">
				<view class="bus">
					<span style='color: #666666'>申请验收日期</span>
				</view>
				<p>{{rows.applAcceptDate}}</p>
			</view>
			<view class=" bod_cost">
				<view class="bus">
					<span style='color: #666666'>相关资料验收</span>
				</view>
				<p style='color: #666666;'>{{rows.acceptanceType}}</p>
			</view>
			<view class=" bod_cost">
				<view class="bus">
					<span style='color: #666666'>资料备注</span>
				</view>
			</view>
			<view class="textarea">
				<u--textarea maxlength='50'disabled  count v-model="rows.referenceReasion" border='none'
					placeholder="请输入"></u--textarea>
			</view>
			<view class=" bod_cost" v-if="!!rows.trainedEvaluationFileNo">
				<view class="bus">
					<span style='color: #666666'>附件名称</span>
				</view>
				<p style='color: #666666;'>{{rows.trainedEvaluationFileNo}}</p>
			</view>
		</view>
		
		
		
		<!-- 核准结果 -->
		<view class="formcard" id='add_three'>
			<view class="bodtitle">
				<p><b>核准结果</b></p>
			</view>
			<view class=" bod_cost">
				<view class="bus">
					<span style='color: #999999'>培训效果是否达到</span>
				</view>
				<p>{{rows.isEffective == 1?'是':'否'}}</p>
				<!-- <p><u-switch v-model="isbt" size='22'></u-switch></p> -->
			</view>
			<view class=" bod_cost">
				<view class="bus">
					<span style='color: #999999'>未达到时后续管理措施<label style="color: red;">*</label></span>
				</view>
			</view>
			<view class="textarea">
					<u--textarea disabled  maxlength='50' count v-model="rows.affteManagAction" border='none'
						placeholder="请输入"></u--textarea>
			</view>
				<view class=" bod_cost" v-for="(a,index) in pelist">
					<view class="bus">
						<span style='color: #666666'>{{a.tit}}<label style="color: red;">*</label></span>
					</view>
					<p>{{rows[a.val]}}</p>
				</view>
		</view>
	</view>
</template>

<script>
	import liveexpand from '../../tools/liveExpand.vue'
	export default {
		components:{
			liveexpand
		},
		data() {
			return {
				list1: [{
						name: '基本信息',
					},
					{
						name: '培训信息'
					},
					{
						name: '费用预算'
					},
					{
						name: '效果评估',
					},
				],
				//基本信息
				addlist: [{
						tit: '单据编号',
						val: 'billNo'
					},
					{
						tit: '流程审批通道',
						val: 'approvalChannel'
					},
					{
						tit: '申请人',
						val: 'userDesc'
					},
					{
						tit: '员工编号',
						val: 'userId'
					},
					{
						tit: '所属部门',
						val: 'deptNm'
					},
					{
						tit: '科室',
						val: 'subdeptNm'
					},
					{
						tit: '系班组',
						val: 'department'
					},
					{
						tit: '手机',
						val: 'phone'
					},
					{
						tit: '培训项目号',
						val: 'projectNo'
					},
					{
						tit: '培训项目流水号',
						val: 'trainFlowNo'
					},
					{
						tit: '培训目标',
						val: 'trainTarget'
					},
					{
						tit: '培训项目及名称',
						val: 'projectDesc'
					},
					{
						tit: '适用对象',
						val: 'suitable'
					},
					{
						tit: '是否年度计划项目',
						val: 'ifYearPlan',
						type:'boo'
					},
					{
						tit: '项目培训预算',
						val: 'trainedBudgetAmt',
						type:'number'
					},
					{
						tit: '效果评估方式',
						val: 'effectEvaluation'
					},
					{
						tit: '备注',
						val: 'reasion'
					},
					{
						tit: '培训服务协议',
						val: 'serviceAgreement',
					},
					{
						tit: '年限',
						val: 'term'
					},
				],
				appshow: true,
				// 培训人员信息
				userlist: [{
						tit: '姓名',
						val: 'empName'
					},
					{
						tit: '性别',
						val: 'sex',
						type:'sex'
					},
					{
						tit: '部门',
						val: 'deptNm'
					},
					{
						tit: '科室',
						val: 'subdeptNm'
					},
					{
						tit: '计划开始日期',
						val: 'planStartDate'
					},
					{
						tit: '计划结束日期',
						val: 'planEndDate'
					},
					{
						tit: '单期学时',
						val: 'countTime'
					},
					{
						tit: '学习地点',
						val: 'learnAddress'
					},
				],
				//培训机构信息
				infolist: [{
						tit: '培训机构名称',
						val: 'companyName'
					},
					{
						tit: '联系人',
						val: 'contacts'
					},
					{
						tit: '联系电话',
						val: 'phone'
					},
					{
						tit: '固定电话',
						val: 'telephone'
					},
					{
						tit: '电子邮箱',
						val: 'email'
					},
					{
						tit: '讲师名称',
						val: 'teacher'
					},
					{
						tit: '备注',
						val: 'remarks'
					}
				],
				//预算信息列表
				celllist: [{
						tit: '预算号名称',
						val: 'budgetNm'
					},
					{
						tit: '预算年度',
						val: 'budgetYear'
					},
					{
						tit: '年度预算金额',
						val: 'preoAmt',
						type:'number'
					},	
					{
						tit: '本次培训金额',
						val: 'trainBudAmt',
						type:'number'
					},
					{
						tit: '年度剩余可用金额',
						val: 'usableAmt',
						type:'number'
					},
					{
						tit: '是否需要外租场地或车辆',
						val: 'isNeedRent',
						type:'boo'
					},
					{
						tit: '外租场地或车辆预算',
						val: 'rentBudget',
						type:'number'
					},
					{
						tit: '外租场地或车辆信息',
						val: 'rentInfo'
					},
				],
				//费用明细
				celllist1: [{
						tit: '科室名称',
						val: 'subdeptNm'
					},
					{
						tit: '银行账号',
						val: 'empBank'
					},
					{
						tit: '出发日期',
						val: 'startDate',
					},	
					{
						tit: '出发地址',
						val: 'startLocation',
					},
					{
						tit: '到达日期',
						val: 'endDate',
					},
					{
						tit: '补贴天数',
						val: 'subsidyDays',
					},
					{
						tit: '是否被招待',
						val: 'isServe',	
						type:'boo'
					},
					{
						tit: '招待次数',
						val: 'serveMealNo'
					},
					{
						tit: '是否指定酒店',
						val: 'isOfficialHotel',
						type:'boo'
					},
					{
						tit: '司机班确认',
						val: 'isCompanyFilght',
						type:'boo'
					},
				],
				celllist2:[
					{
						tit: '针对性、正确性的（45）',
						val: 'pertinence',
					},
					{
						tit: '行动计划（15）',
						val: 'actionPlan',
					},
					{
						tit: '报告的质量（15）',
						val: 'qualityReports',
					},
					{
						tit: '提交准时性（15）',
						val: 'submissionPunctuality',
					},
					{
						tit: '其他（15）',
						val: 'otherDescription',
					},
					{
						tit: '评价结论',
						val: 'conclusion',
					},
				],
				textar:'',
				isbt:true,
				pelist:[
					{tit:'培训目的分类',val:'trainedGoalType'},
					{tit:'专业管理人数',val:'proManagePers'},
					{tit:'培训方式',val:'trainedWay'},
					{tit:'师资类别',val:'teachersLevel'},
					{tit:'行政管理人数',val:'administrativePers'},
					{tit:'工程技术人员人数',val:'engineersPers'},
					{tit:'技能人员人数',val:'skilledPers'},
					{tit:'派驻员人数',val:'stationedPers'},	
				],
				// 补助金额
				bzmoney:[
					{tit:'交通补助金额',val:'vehicleSubsidyAmt'},
					{tit:'午餐补助金额',val:'lunchSubsidyAmt'},
					{tit:'晚餐补助金额',val:'dinnerSubsidyAmt'},
					{tit:'休息日补助金额',val:'dateOffSub'},
				],
				// 交通费
				busmoney:[
					{tit:'携程火车票金额',val:'xcTrainTickets'},
					{tit:'非携程火车票金额',val:'noXcTrainTickets'},
					{tit:'非携程火车票税额',val:'xcTrainTax'},
					{tit:'携程机票金额',val:'xcFlyTickets'},
					{tit:'非携程机票金额',val:'noXcFlyTickets'},
					{tit:'非携程机票税额',val:'xcFlyTax'},
					{tit:'非实名车票金额',val:'noAutBusTickets'},
					{tit:'实名车票金额',val:'autBusTickets'},
					{tit:'实名车票税额',val:'autBusTicketsAtx'},
				],
				// 住宿费
				zsmoney:[
					{tit:'携程酒店金额',val:'xcHotelAmt'},
					{tit:'非携程酒店金额',val:'noXcHotelAmt'},
				],
				cellshow: true,
				cellshow1:false,
				cellshow2:false,
				cellshow3:false,
				rows:[],
				trainPersonEntities:[] ,//培训人员信息
				trainCompanyEntities:[],//机构信息
				trainedBudgetEntities:[],//预算信息
				reiRouteEntities:[], //费用明细
				trainedEvaluationEntities:[],//报告评价
				fileNo:[]
			}
		},
		onLoad() {
			 //获取流程页面的流程上下文[实用的流程信息从这里获取]
			  let billNo= window.parent.myvm.wfContext.BusinessKey;
			  this.fileNo = window.parent.myvm.wfContext.BusinessKey;
			  this.getlist(billNo)
		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
			let b = this.nm
		},
		computed:{
			
		},
		methods: {
			getlist(billNo){
				let _this = this
				let params = {
					billNo
				}
				_this.$lyRequest.get('/gateway/reim/mp/dbsap/trainedEntity/getTrain.do',
					params
				).then((result) => {
					if (result.success) {
						// console.log(result)
						this.rows = result.data.rows
						this.trainPersonEntities = result.data.rows.trainPersonEntities
						this.trainCompanyEntities = result.data.rows.trainCompanyEntities
						this.trainedBudgetEntities = result.data.rows.trainedBudgetEntities
						this.reiRouteEntities = result.data.rows.reiRouteEntities
						this.trainedEvaluationEntities = result.data.rows.trainedEvaluationEntities
						this.changeList()
					} else {
						console.log(result.data.msg)
					}
				})
			},
			changeList(){
				if(this.rows.serviceAgreement == 0){
					this.rows.serviceAgreement = '不需要'
				}else if(this.rows.serviceAgreement == 1){
					this.rows.serviceAgreement = '需要'
				}
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			checkbtn(item) { //切换tabs
				if (item.index === 0) {
					this.commonApi.goAnchor('add_one')
				} else if (item.index === 1) {
					this.commonApi.goAnchor('add_two')
				} else if (item.index === 2) {
					this.commonApi.goAnchor('add_three')
				} else if (item.index === 3) {
					this.commonApi.goAnchor('add_four')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: pf;
	}
	.bus {
			display: flex;
			flex-direction: row;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			p{
				font-size: 30rpx;
			}
		}
	.sky{
		width: 90%;
		background-color:rgb(247,251,255);
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		padding: 20rpx 30rpx;
		margin: 10rpx 30rpx;
		box-sizing: border-box;
	}
	.textarea {
		display: flex;
		flex-direction: column;
	
		.gup {
			margin: 50rpx 0;
			padding-left: 30rpx;
			margin-top: 20rpx;
		}
	}
	.u-textarea {
		background-color: #fafafa;
		width: 90%;
		margin: 10rpx auto;
	}






	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 35rpx 0;
		box-sizing: border-box;
		box-shadow: 5px -10rpx 5px 0px rgba(225, 225, 225, .4), ;

		.bottom_white1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;

			.custom-styles {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
			}

			.custom-style {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
			}
		}
	}
	.right_text {
		display: inline-block;
		p{
			span {
				color: #ff6400;
				font-size: 36rpx;
				font-weight: bold;
				padding-right: 0rpx;
			}
			label {
				color: #ff6400;
				font-weight: bold;
				font-size: 24rpx;
			}
		}
	}
.bod_costs {
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: none;
			height: 100rpx;
			span {
				display: inline-block;
				font-size: 30rpx;
				width: auto;
				// white-space:nowrap;
			}
			p {
				font-size: 30rpx;
				word-break:break-all;
				display: inline-block;
				
			}
			
	}
.bus {
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			width: 50rpx;
			height: 50rpx;
		}
		p{
			font-size: 30rpx;
		}
	}
.bodcolors{
	word-wrap:break-word
	span{
		word-wrap:break-word
	}
}
.solts{
	span{
		font-weight: bold;
	}
	label{
		font-weight: bold;
		font-size: 24rpx;
	}
}
</style>
